<template>
  <div class="wrap">
    <header>
      <span @click="go()">&lt;</span>
      <p>消息列表</p>
    </header>
    <main>
      <div class="one">
        <van-tabs>
          <van-tab title="消息">
            <van-swipe-cell v-for="(item,index) in list" :key="index" class="mes">
              <dl>
                <dt>
                  <img :src="item.img" alt />
                </dt>
                <dd>
                  <div>
                    <h4>{{item.name}}</h4>
                    <span>上午7:00</span>
                  </div>
                  <p>{{item.introduce}}</p>
                </dd>
              </dl>
              <template #right>
                <van-button square type="danger" text="删除" @click="del(item.id)" />
                <van-button square type="primary" text="置顶" @click="active(index)" />
              </template>
            </van-swipe-cell>
          </van-tab>
          <van-tab title="公告">
            <div class="boc">
              <div class="boc1">
                <p>放假通知</p>
                <span>2021年9月30日12:00</span>
              </div>
              <p>国庆节放假</p>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "../../utils/request";
import Vue from "vue";
import { SwipeCell } from "vant";
import { Tab, Tabs } from "vant";

Vue.use(Tab);
Vue.use(Tabs);

Vue.use(SwipeCell);
export default {
  data() {
    return {
      list: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    go() {
      this.$router.go(-1);
    },
    getList() {
      axios({
        url: "/api/getList",
        method: "post"
      }).then(res => {
        // console.log(res);
        this.list = res.data.data;
      });
    },

    del(id) {
      axios({
        url: "/api/delList",
        method: "post",
        data: { id }
      }).then(res => {
        // console.log(res);
        this.getList();
      });
    },

    active(index) {
      this.list.unshift(...this.list.splice(index, 1));
    }
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  width: 100%;
  height: 50px;
  display: flex;
  line-height: 50px;
  align-items: center;
  background: rgb(56, 121, 240);
  padding: 15px;
  color: #fff;
  p {
    padding-left: 38%;
  }
}
main {
  flex: 1;
  overflow-y: scroll;
  background: #f1f1f1;
  .one {
    .mes {
      background: #fff;
      margin: 15px 0;
      dl {
        display: flex;
        dt img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
        dd {
          margin-left: 15px;
          div {
            display: flex;
            justify-content: space-between;
            span {
              font-size: 14px;
              color: #999;
            }
          }
          p {
            font-size: 15px;
            padding-top: 8px;
          }
        }
      }
    }
    .boc {
      height: 70px;
      border: 1px solid #999;
      margin: 10px;
      padding: 5px;
      color: #333;
      .boc1 {
        display: flex;
        justify-content: space-between;
        p {
          font-size: 16px;
          padding: 5px 0;
        }
        span {
          font-size: 14px;
        }
      }
      p {
        font-size: 16px;
      }
    }
  }
}
</style>